<script setup>
import { ref } from 'vue'
import { getBannerListFn, getNavListFn, getArticleListFn } from '@/api/home';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';

const router = useRouter()
const searchText = ref('')
const bannerList = ref([])
const navList = ref([])
const articleList = ref([])
const refresh = ref(false)

function onRefresh() {
    setTimeout(() => {
        showToast('刷新成功')
        count.value = 1
        list.value = articleList.value.slice((count.value - 1) * 10, count.value * 10)
        refresh.value = false;
        finished.value = false
    }, 1000)
}

getBannerListFn().then(res => {
    bannerList.value = res.data.bannerList
})

getNavListFn().then(res => {
    navList.value = res.data.navList
    // console.log(navList.value);
})

getArticleListFn().then(res => {
    // console.log(res);
    articleList.value = res.data.articleList
})

// 前往文章详情页
function toShow(article) {
    // console.log(article);
    router.push({
        name: 'homeShow',
        query: {
            paraid: article.paraid
        }
    })
}

// 前往Tag
function toTag(item) {
    router.push({
        name: 'homeTag',
        query: {
            tag: item.name
        }
    })
}

const loading = ref(false)
const finished = ref(false)
const count = ref(1)
const list = ref([])
function onLoad() {
    setTimeout(() => {
        list.value = list.value.concat(articleList.value.slice((count.value - 1) * 10, count.value * 10))
        count.value++
        loading.value = false
        if (list.value.length >= articleList.value.length) {
            finished.value = true
        }
    }, 100)
}
</script>

<template>
    <div class="main">
        <van-nav-bar title="医疗健康论坛" />
        <div class="content">
            <van-pull-refresh v-model="refresh" @refresh="onRefresh">
                <!-- 搜索 -->
                <van-search v-model="searchText" shape="round" background="#fff" placeholder="请输入搜索关键词" clearable />

                <!-- 轮播图 -->
                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="item in bannerList" :key="item.src">
                        <img class="bannerImg" :src="item.src">
                    </van-swipe-item>
                    <template #indicator="{ active, total }">
                        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                    </template>
                </van-swipe>

                <!-- nav -->
                <van-grid :column-num="4">
                    <van-grid-item v-for="item in navList" :text="item.name" @click="toTag(item)">
                        <template #icon="">
                            <img class="navIcon" :src="item.src">
                        </template>
                    </van-grid-item>
                </van-grid>
                <!-- 文章 -->
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <h2>推荐文章</h2>
                    <van-card v-for="item in list" :desc="item.desc" :title="item.title" :thumb="item.img"
                        @click="toShow(item)">
                        <template #tags>
                            <van-tag plain :type="item.tag.type">{{ item.tag.name }}</van-tag>
                        </template>
                        <template #price>
                            {{ item.data }}
                        </template>
                    </van-card>
                </van-list>
            </van-pull-refresh>
            <van-back-top :right="20" :bottom="60"/>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.bannerImg {
    width: 100%;
    height: 200px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
}

.custom-indicator {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: rgba($color: #fff, $alpha: 0.5);
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 4px;
}

.navIcon {
    width: 40px;
    height: 40px;
}
</style>